<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>广师大科教</title>
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="favicon.ico" />

    <!-- 引入框架 -->
    <!-- Vue + jQuery + ElementUI + CloudBase -->
    <!-- Vue -->
    <script src="./js/vue.js"></script>


    <!-- 引入云开发web sdk -->
    <script src="js/cloud.js"></script>

    <!-- 引入jquery -->
    <script src="js/jquery.js"></script>

    <!-- 本文件样式 -->
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

    <div id="mobile" element-loading-background="rgba(255,255,255,0.9)">
        <div class="content maxWidth">
            <div class="nav">
                <div class="nav_left_part">
                    <div @click="changePage" data-page="consultingGroup.html" :class="activePage=='consultingGroup.html'?'nav_item_active normalFont nav_Left_Font_per_Box':'normalFont nav_Left_Font_per_Box'" class="normalFont nav_Left_Font_per_Box" style="color: #ffffff">咨询群</div>
                    <div @click="changePage" data-page="interviewGroup.html" :class="activePage=='interviewGroup.html'?'nav_item_active normalFont nav_Left_Font_per_Box':'normalFont nav_Left_Font_per_Box'" style="color: #ffffff">面试群</div>
                </div>

                <img src="static/images/robot.png" alt="icon路径错误" class="icon" />
            </div>
            <div id="axiosContent"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#mobile",
            data() {
                return {
                    activePage: "consultingGroup.html"
                };
            },
            methods: {
                changePage(e) {
                    let that = this;
                    console.log(e.target.dataset.page);
                    let page = e.target.dataset.page;
                    $.ajax({
                        method: 'get',
                        dataType: "html",
                        url: './' + page,
                        success: res => {
                            $("#axiosContent").html(res);
                            that.activePage = page;
                        }
                    });
                }
            },
            mounted() {
                this.changePage({
                    target: {
                        dataset: {
                            page: "consultingGroup.html"
                        }
                    }
                })
            },
        });
    </script>
</body>

</html>